`<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center courseList t_courseList">
        <!-- <div class="main-left2" style="padding-bottom: 20px; height: 600px;"> -->
        <div class="main-left2" style="padding-bottom: 20px;">
          <!-- 表头 -->
          <div class="con2" style="overflow:hidden;padding:20px 60px 10px 60px;">
            <div class="filter" style="margin-top: 0px;">
              <dl style="width: 75%;float: left;display: inline;margin-bottom: 16px;margin-top: 0px;">
                <!--                <dt>资源分类：</dt>-->
                <div style="overflow-x: auto; height: auto;white-space:nowrap;">
                  <dd :class="{ cur: categoryId == item.id }" v-for="(item, index) in cateData" :key="index"
                    @click="getCatList(item.id, index, 1, filetype, item.kind_name)">{{ item.kind_name }}</dd>
                </div>
              </dl>
            </div>
            <div class="seach_box" style="float: left;">
              <el-input placeholder="请输入内容" v-model="seachContent" @keyup.enter.native="search()"></el-input>
            </div>

            <div style="float: left;position: relative;">
              <el-button class="seach_btn" @click="search">
                <span class="search">搜索</span>
              </el-button>
            </div>
          </div>
          <!-- 列表 -->
          <div class="t_main_table_box">
            <ul class="main_box_height" v-if="listData.length > 0"
              style=" overflow-y: auto; overflow-x: hidden;direction:rtl;" @mousewheel="selectChanged(categoryId,true)">
              <template v-for="(item, i) in listData">
                <li :key="i" class="left-side" @click="get_left_data(i,item,1)" :class="{ liStyle : liId == item.id }">
                  <span class="tit text-hide">{{ item.kind_item_name }}</span>
                </li>
              </template>
            </ul>
            <el-empty :image-size="200" v-else style="float: left;clear: both;"></el-empty>
            <div class="main_box_height" style="float : left; overflow-y: auto;overflow-x: hidden;"
              @mousewheel="get_left_data(index, leftItem,leftPage+1)">
              <div class="table_header">
                <div style="width:346px;text-align:left;">资源名称</div>
                <div style="width:184px;">资源类型</div>
                <div style="width:182px;">浏览量</div>
                <div style="width:182px;">收藏量</div>
                <div style="width:172px;">操作</div>
              </div>
              <template v-for="(item,index) in tableData">
                <div :key="index" class="table_tr" @click="showChildren(index,item)">
                  <div style="width:346px;text-align:left;justify-content: flex-start;"
                    @click="openDetils(item,index,-1)">
                    <span>{{item.resources_name}}</span>
                    <i v-if="item.type == 'folder'" class="el-icon-s-unfold"></i>
                  </div>
                  <div style="width:184px;">{{item.ext_name}}</div>
                  <div style="width:182px;">{{item.shownum}}</div>
                  <div style="width:182px;">{{item.collectionnum}}</div>
                  <div style="width:172px;">
                    <template v-if="item.type == 'folder'">
                      <i v-if="showChildrenIndexs.indexOf(index) == -1" class="el-icon-arrow-right"></i>
                      <i v-if="showChildrenIndexs.indexOf(index) != -1" class="el-icon-arrow-down"></i>
                    </template>
                    <!-- <span v-else-if="item.type == 'folder' && (item.children && !item.children.length)"></span> -->
                    <div v-else>
                      <span class="collection_style" @mouseout="changeText($event,'加入收藏')"
                        @mouseover="changeText($event,'加入收藏')" @click="handleClick(item.id, item)"
                        v-if="item.collection == 0">加入收藏</span>
                      <span class="collection_style" @mouseover="changeText($event,'取消收藏')"
                        @mouseout="changeText($event,'已收藏')" @click="handleClick(item.id, item)" v-else>已收藏</span>
                    </div>
                  </div>
                </div>
                <!-- 子 -->
                <template v-if="showChildrenIndexs.indexOf(index) != -1">
                  <div v-loading="dirZiyuanLoading && getDirIndex == index" :key="'el_'+index">
                    <div class="table_tr" v-for="(el,i) in item.children" :key="'el_d_'+index+'_'+i">
                      <div style="width:346px;text-align:left;justify-content: flex-start;"
                        @click="openDetils(el,index,i)">
                        <span style="margin-left:40px;">{{el.resources_name}}</span>
                      </div>
                      <div style="width:174px;">{{el.ext_name}}</div>
                      <div style="width:172px;">{{el.shownum}}</div>
                      <div style="width:172px;">{{el.collectionnum}}</div>
                      <div style="width:172px;">
                        <div>
                          <span class="collection_style" @mouseout="changeText($event,'加入收藏')"
                            @mouseover="changeText($event,'加入收藏')" @click="handleClick(el.id, el)"
                            v-if="el.collection == 0">加入收藏</span>
                          <span class="collection_style" @mouseover="changeText($event,'取消收藏')"
                            @mouseout="changeText($event,'已收藏')" @click="handleClick(el.id, el)" v-else>已收藏</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </template>
            </div>
          </div>
        </div>
        <div>
          <div class="main-right2" style="margin-left:20px;margin-right:0px;float:none;">
            <div class="con-menu2" @click="goBack()">
              <div class="menu-img">
                <img src="static/img/r-back.png" />
              </div>
              <div class="menu-item">返回</div>
            </div>
          </div>
          <div class="main-right2" style="margin-left:20px;margin-right:0px;float:none;">
            <div class="con-menu2" @click="goCollection()">
              <div class="menu-img">
                <img src="static/img/collection.png" />
              </div>
              <div class="menu-item">我的收藏</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="video-play-dig" v-if="isOpen6 == true" style="position: absolute;z-index: 2001;">
      <div v-show="!isFullScreen" class="title t_title">
        <div class="t_title_left">
          <div class="text-hide" style="max-width:705px;display: inline-block;">{{ resources_name }}</div>
          <div class="mr20" style="font-size: 14px;line-height: 54px;margin-left:20px;s">
            分类：{{kind_name}}--{{kind_item_name}}</div>
        </div>

        <div class="t_title_right">
          <label class="viewnum2 mr20">{{ shownum }}</label>
          <label class="collectnum2 mr20">{{ collectionnum }}</label>
          <label v-if="kind_collection > 0" :class="[ 'mr20', 'italic', kind_collection > 0 ? 'cur' : '']"
            style="cursor: pointer;font-size: 12px;" @click="collectLi(index, kind_id)">取消收藏</label>
          <label v-else :class="[ 'mr20', 'italic', kind_collection > 0 ? 'cur' : '']"
            @click="collectLi(index, kind_id)" style="cursor: pointer;font-size: 12px;">加入收藏</label>
        </div>
        <!-- <span style="width:30px;height:30px;" ><img src="static/img/close.png" /></span> -->
        <img @click="getFullScreen()" class="fullScreen" src="../../../static/img/fullScreen.png" alt />
        <img class="t_close_btn" @click="getClose()" src="static/img/close.png" />
      </div>
      <div class="cont">
        <div class="mleft" :class="getFileType(currentZiyuan.file) == 'video'&&!isFullScreen?'specialVideo':''">
          <div class="play_area" :class="isFullScreen?'videFullScreen':''" style="height: 720px;">
            <!-- 视频音频 -->
            <div id="course-player" v-loading="isIframeLoad" element-loading-text="资源加载中..."
              element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
              v-if="getFileType(currentZiyuan.file) == 'video'" style="color: #00FFFF;"></div>
            <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" v-else-if="getFileType(currentZiyuan.file) == 'html'"
              style="height:720px;">
              <template>
                <iframe style="width: 100%;height: 100%;" class="addPad" :src="currentZiyuan.file"
                  @loadstart="isIframeLoad=true" @load="isIframeLoad = false"></iframe>
              </template>
            </div>
            <template v-else-if="getFileType(currentZiyuan.file) == 'radio'">
              <!--  -->
              <div class="item-courseRadio" :style="{ 'background-image': 'url(' + bgImg + ')' }">
                <img v-if="showImg" :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png"
                  style="width: 372px;min-height: 372px;" />
                <div class="raad-box" v-else>
                  <div class="item-read" style="padding-top:3%;" :class="{'no_mask': currentZiyuan.is_mask!=1}">
                    <div v-for="(item, index) in read" :key="index" class="item-all">
                      <span v-if="index < read.length">
                        <span :class="[getCurrent(item,index) ? 'item-color' : '']">{{ item.text }}</span>
                      </span>
                    </div>
                  </div>
                </div>
                <audio @ended="stopMusic()" @pause="pauseMusic()" @play="playMusic()" id="audio" autoplay
                  class="item-changeAudio" @timeupdate="update" :src="music" controls="controls"
                  controlslist="nodownload">Your browser does not support the audio element.</audio>
              </div>
            </template>
            <!-- office文件 -->
            <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" v-else-if="
                getFileType(currentZiyuan.file) == 'excel' ||
                  getFileType(currentZiyuan.file) == 'word' ||
                  getFileType(currentZiyuan.file) == 'pdf' ||
                  getFileType(currentZiyuan.file) == 'ppt'
              " style="height:720px;">
              <iframe style="background-color: #FFFFFF;" class="course-iframe"
                :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentZiyuan.file" @loadstart="isIframeLoad=true"
                @load="isIframeLoad = false"></iframe>
            </div>
            <!-- 图片 -->
            <div v-else-if="getFileType(currentZiyuan.file) == 'image'">
              <el-carousel indicator-position="outside" :interval="100000" style="height: 720px"
                :class="isFullScreen?'isSpecialImg':''" :style="isFullScreen?{height:'100vh!important'}:''"
                v-if="currentZiyuan.file.split(';').length > 1">
                <el-carousel-item v-for="(item, index) in currentZiyuan.file.split(';')" :key="index">
                  <img :style="isFullScreen?{height:'100vh!important'}:''" style="height:720px" :src="item" />
                </el-carousel-item>
              </el-carousel>

              <img style="height:720px" :src="currentZiyuan.file" :style="isFullScreen?{height:'100vh!important'}:''"
                v-if="currentZiyuan.file.split(';').length == 1" />
            </div>
            <template v-else-if="getFileType(currentZiyuan.file) == 'swf'">
              <object :data="currentZiyuan.file" type="application/x-shockwave-flash"
                style="width:970px;height:60%;position: fixed;top: 50%;left: 50%;transform: translate(-60%,-45%);">
                <param name="movie" value="demo.swf" />
                <embed :src="currentZiyuan.file" />
              </object>
            </template>
          </div>
        </div>
        <div id="mright" class="mright" v-show="!isFullScreen" style="overflow-y: scroll;"
          @mousewheel="get_left_data(index, leftItem,leftPage+1)">
          <!-- <el-tree ref="tree" :data="tableData" :load="loadNode" lazy node-key="id" @node-click="handleNodeClick"
            :default-expanded-keys="defaultExpandedKeys" :props="treeProps">
            <span slot-scope="{ node, data } " style="position: relative; width: 100%; height: 100%;">
              <span class="el_tree_item_name" :class="{'child_text':node.level == 2}"
                style="position: absolute;top: 30%;">{{ data.resources_name }}</span>
              <label :class="['  fr', 'ico-' + getFileType(data.file)]"
                style="position: absolute; right: 0; top: 30%;">&nbsp;</label>
            </span>
          </el-tree> -->
          <template v-for="(item,index) in tableData">
            <div :ref="'tree-item-'+item.id" class="tree-item" :class="{'tree-item-active':kind_id == item.id}"
              :key="'item_'+index" @click="handleNodeClick(item,index)">
              <i v-if="item.type == 'folder' && defaultExpandedKeys.indexOf(item.id) == -1"
                class="el-icon-caret-right"></i>
              <i v-if="item.type == 'folder' && defaultExpandedKeys.indexOf(item.id)!= -1"
                class="el-icon-caret-bottom"></i>
              <i v-if="item.type != 'folder'"></i>
              <span class="text-hide">{{ item.resources_name }}</span>
              <label :class="['ico-' + getFileType(item.file)]">&nbsp;</label>
            </div>
            <div v-loading="dirZiyuanLoading && getDirIndex == index" v-if="defaultExpandedKeys.indexOf(item.id)!= -1"
              :key="'item_ii_'+index">
              <div :ref="'tree-item-'+el.id" class="tree-item tree-children"
                :class="{'tree-item-active':kind_id == el.id}" v-for="(el,elIndex) in item.children"
                :key="'item_el_'+elIndex" @click="handleNodeClick(el,index,elIndex)">
                <i></i>
                <span class="text-hide">{{ el.resources_name }}</span>
                <label :class="['ico-' + getFileType(el.file)]">&nbsp;</label>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="close-tip" v-if="isFullScreen && fullScrreenSec"><span>按 ESC 即可退出全屏</span></div>
    <div class="suoxiao" v-if="isFullScreen">
      <img  @click="isFullScreen = false" src="../../../static/img/suoxiao.png" />
    </div>
  </div>
</template>

<script>
  var player
  import Header from '../../components/header_lecture.vue'
  import flatArr from '../../common/utils/flat_arr.js'
  export default {
    data() {
      return {
        isIframeLoad: true,
        kind_collection: 0,
        kind_id: 0,
        shownum: 0,
        collectionnum: 0,
        res_type_text: '', //分类
        kind_item_name: '', //资源名称
        resources_name: '',
        index: 0,
        isOpen6: false,
        cateData: [],
        childData: [],
        listData: [],
        img_src1: '../../../static/img/arrow_right.png',
        tableData: [],
        clone_data: [], //克隆表格数据
        current: -1,
        seachContent: '', //搜索内容
        search_id: '', //查询id
        liId: '0', //li的Id
        categoryId: '0',
        kind_name: '', //资源分类名称
        tmp_arr: [],
        zy_id: 0,
        currentPage: 1,
        currentIndex: 0,
        total: 0,
        page: 0,
        page_size: 15,
        filetype: '',
        currentZiyuan: {},
        resourceData: [],
        checkedZY: [],
        typeList: [],
        itemData: [],
        defaultProps: {
          children: 'children',
          label: 'resources_name',
        },
        infoData: [],
        music: '',
        activeClass: 'playM',
        errorClass: 'stopM',
        isPlayMusic: false,
        currentTxt: 0, //当前歌词所在位置
        rowIndex: 0, //行索引
        array: [], //全部歌词
        indexArray: 0, //监听高亮歌词显示
        read: [], //截取的要显示的歌词
        showImg: true, //没有歌词显示转动图片，
        bgImg: '../../../static/img/music-bg.jpg', //轮播背景图
        bgTimer: '',
        bgAllImg: ['../../../static/img/music-bg.jpg'], //当前播放歌曲轮播的背景图片
        flag: 0, //防止定时器多次执行
        imgNum: 0, //轮播图第几张
        showChildrenIndexs: [],
        defaultExpandedKeys: [],
        player: null,
        parentNode: null,
        chekcParentIndex: -1,
        checkNodeIndex: -1,
        isFirst: true,
        leftPage: 0,
        leftItem: {},
        isFullScreen: false,
        FullWeight: 0,
        FullHeight: 0,
        isSelectChanged: false,
        checkItem: null,
        isGetLeftData: false,
        dirZiyuanLoading: false,
        getDirIndex: -1,
        treeProps: {
          isLeaf: 'leaf'
        },
        fullScrreenSec: 3,
        fullScrrernIntval: null
      }
    },
    beforeDestroy() {
      clearInterval(this.bgTimer) //销毁定时器
      this.bgTimer = null
    },
    created() {
      this.FullHeight = document.documentElement.clientHeight
      this.FullWeight = document.documentElement.clientWidth
      this.getCategory()
      this.gettypeList()
    },
    watch: {
      //监听时间变化
      currentTxt(newv) {
        // if (newv > 1) {
        //   var ret = this.array.findIndex((value, index, arr) => {
        //     return value.time == newv
        //   })
        //   if (ret != -1) {
        //     this.indexArray = ret
        //     if (this.indexArray > 6) {
        //       this.read = this.array.slice(
        //         this.indexArray - 5,
        //         this.indexArray + 13
        //       )
        //     }
        //   }
        // }
      },
      isFullScreen(newv) {
        console.log(newv)
        console.log(this.fullScrreenSec)
        if (newv) {
          this.fullScrreenSec = 3
          this.fullScrrernIntval = setInterval(() => {
            if (this.fullScrreenSec) {
              this.fullScrreenSec--
            } else {
              clearInterval(this.fullScrrernIntval)
              this.fullScrrernIntval = null
            }
          }, 1000);
        } else {
          if (this.fullScrrernIntval) {
            clearInterval(this.fullScrrernIntval)
            this.fullScrrernIntval = null
          }
        }
      }
    },
    mounted() {
      let vm = this

      document.addEventListener('keydown', (e) => {
        if (e.keyCode == 27) {
          vm.getExitFull() //事件名
        }
      })
    },
    methods: {
      getCurrent(item, index) {
        if (index < this.read.length - 1) {
          return (this.currentTxt > this.read[index].time - 1 && this.currentTxt < this.read[index + 1].time)
        } else if (index == this.read.length - 1) {
          return (this.currentTxt > this.read[index].time - 1 && this.currentTxt == this.read[index].time)
        } else {
          return this.currentTxt > this.read[index].time - 1
        }
      },
      iframeLoad() {},
      changeText(event, text) {
        let el = event.currentTarget
        el.innerHTML = text
      },
      showChildren(index, item) {
        if (!item.children) {
          this.getDirIndex = index
          this.getDirZiyuanList(item)
          this.dirZiyuanLoading = true
        }
        let arrIndex = this.showChildrenIndexs.indexOf(index)
        if (arrIndex == -1) {
          this.showChildrenIndexs.push(index)
        } else {
          this.showChildrenIndexs.splice(arrIndex, 1)
        }
        this.$forceUpdate()
        // if (this.showChildrenIndexs == index) {
        //   this.showChildrenIndexs = -1
        //   return
        // }
        // this.showChildrenIndexs = index
      },
      handleNodeClick(item, index, elIndex) {
        if (item.type == 'folder') {
          // this.isIframeLoad = true
          let checkIndex = this.defaultExpandedKeys.indexOf(item.id)
          console.log(checkIndex)
          console.log(item.id)
          if (checkIndex == -1) {
            this.chekcParentIndex = index
            this.checkNodeIndex = -1
            this.defaultExpandedKeys.push(item.id)
            this.loadNode(item, index)
            this.getDirIndex = index
            this.dirZiyuanLoading = true
          } else {
            this.defaultExpandedKeys.splice(checkIndex, 1)
          }
          // this.parentNode = node.parent
          // if (node.level == 2) {
          //   let firstNodes = this.parentNode.parent.childNodes
          //   firstNodes.forEach((element, index) => {
          //     if (this.parentNode.id == element.id) {
          //       this.chekcParentIndex = index
          //     }
          //   })
          //   this.parentNode.childNodes.forEach((element, index) => {
          //     if (element.id == node.id) {
          //       this.checkNodeIndex = index
          //     }
          //   })
          // } else {
          //   this.chekcParentIndex = -1
          //   this.checkNodeIndex = -1
          // }
        }

        // this.kind_name = item.ext_name;
        if (item.type != 'folder') {
          if (elIndex != undefined) {
            this.isFirst = false
          } else {
            this.isFirst = true
          }
          this.chekcParentIndex = index
          this.checkNodeIndex = elIndex

          this.resources_name = item.resources_name
          this.playLi(0, item)
        }
      },
      // 懒加载二级
      loadNode(item, index) {
        this.$api('ziyuan.getDirZiyuanList', {
          id: item.id,
          token: localStorage.getItem('token'),
        }).then((res) => {
          item.children = res.data
          this.$forceUpdate()
          this.dirZiyuanLoading = false
          if (res.data.length) {
            this.getDirIndex = -1
            // this.playLi(0, res.data[0])
            // this.handleNodeClick(res.data[0], index, 0)
          }
        })
      },
      getClose() {
        this.isOpen6 = false
        clearInterval(this.bgTimer)
        this.bgTimer = null
        this.flag = 0
      },
      goBack() {
        localStorage.setItem('isHide', true)
        this.$router.go(-1)
      },
      goCollection() {
        this.$router.push('/courseCollect')
      },
      playMusic() {
        this.isPlayMusic = true
        //背景开始轮播
        clearInterval(this.bgTimer)
        this.playBg()
      },
      pauseMusic() {
        //背景停止轮播
        clearInterval(this.bgTimer)
        this.isPlayMusic = false
      },
      stopMusic() {
        //背景停止轮播
        clearInterval(this.bgTimer)
        this.isPlayMusic = false
        let that = this
        if (!that.isFirst) {
          if (
            that.chekcParentIndex != -1 &&
            that.checkNodeIndex <
            that.tableData[that.chekcParentIndex].children.length - 1
          ) {
            if (
              that.getFileType(
                that.tableData[that.chekcParentIndex].children[
                  that.checkNodeIndex + 1
                ].file
              ) == 'radio' || that.getFileType(
                that.tableData[that.chekcParentIndex].children[
                  that.checkNodeIndex + 1
                ].file
              ) == 'video'
            ) {
              // 播放下一个
              that.checkNodeIndex++
              that.handleNodeClick(that.tableData[that.chekcParentIndex].children[that.checkNodeIndex],
                that.chekcParentIndex, that.checkNodeIndex)
            }

          }
        } else {
          if (
            that.chekcParentIndex <
            that.tableData.length - 1
          ) {
            if (
              that.getFileType(
                that.tableData[that.chekcParentIndex].file
              ) == 'radio' || that.getFileType(
                that.tableData[that.chekcParentIndex].file
              ) == 'video'
            ) {
              // 播放下一个
              that.chekcParentIndex++
              that.handleNodeClick(that.tableData[that.chekcParentIndex], that.chekcParentIndex)
            }
          }
        }
      },

      gettypeList() {
        this.$api('ziyuan.getFileType', {}).then((res) => {
          this.typeList = res.data
        })
      },
      getCategory() {
        this.$api('ziyuan.getKindList', {}).then((res) => {
          this.cateData = res.data
          this.categoryId = this.cateData[0].id
          this.kind_name = this.cateData[0].kind_name
          this.handleCurrentChange(1)
        })
      },
      fillter(index, type, categoryId2) {
        this.filetype = type
        this.getCatList(this.categoryId, this.currentIndex, 1, categoryId2)
      },
      //rowIndex为索引 row为一行数据内容对象
      tableRow({
        row,
        rowIndex
      }) {
        if (row.children) {
          delete row.index
        }
        row.index = rowIndex
      },

      //打开弹窗
      openDetils(rows, index, elIndex) {
        if (rows.type == 'folder') {
          return
        }
        if (elIndex != -1) {
          this.isFirst = false
        } else {
          this.isFirst = true
        }
        this.tableData.forEach(el => {
          if (el.type != 'folder') {
            el.leaf = true
          }
        });
        this.isIframeLoad = true
        this.defaultExpandedKeys = []
        // this.itemData = []
        this.rowIndex = index
        // let arr = []
        // res.data.forEach(obj => {
        //   if (obj.children && obj.children.length > 0) {
        //     arr.push(obj)
        //   }
        // });
        // this.itemData = this.tableData
        // TODO

        //打开弹窗
        this.isOpen6 = true

        this.resources_name = rows.resources_name

        if (elIndex == -1) {
          this.playLi(index, this.tableData[index])
          // this.$nextTick(() => {
          //   this.$refs.tree.setCurrentKey(this.tableData[index].id)
          // })
          this.chekcParentIndex = index
          this.checkNodeIndex = -1
        } else {
          this.playLi(index, this.tableData[index].children[elIndex])
          this.$nextTick(() => {
            this.defaultExpandedKeys = [this.tableData[index].id]
            // this.$refs.tree.setCurrentKey(
            //   this.tableData[index].children[elIndex].id
            // )
            this.chekcParentIndex = index
            this.checkNodeIndex = elIndex
            // console.log(rows.id)
            // let ddd = document.getElementById('tree-item-115')
            // console.log(ddd)
          })
        }
        this.$nextTick(() => {
          this.$nextTick(() => {
            let divDom = this.$refs['tree-item-' + rows.id]
            if (divDom) {
              let divOffsetTop = divDom[0].offsetTop
              let mainDiv = document.getElementById('mright')
              if (divOffsetTop > 780) {
                mainDiv.scrollTop = divOffsetTop - 80
              }
            }
          })
        })
        // this.$api('ziyuan.getZiyuanList', {
        //   id: this.search_id,
        //   token: localStorage.getItem('token'),
        // }).then((res) => {
        //   if (res.code == 1) {
        //     this.rowIndex = index
        //     // let arr = []
        //     // res.data.forEach(obj => {
        //     //   if (obj.children && obj.children.length > 0) {
        //     //     arr.push(obj)
        //     //   }
        //     // });
        //     this.itemData = res.data

        //     //打开弹窗
        //     this.isOpen6 = true

        //     this.resources_name = rows.resources_name

        //     if (elIndex == -1) {
        //       this.playLi(index, this.itemData[index])
        //       this.$nextTick(() => {
        //         this.$refs.tree.setCurrentKey(this.itemData[index].id)
        //       })
        //       this.chekcParentIndex = -1
        //       this.checkNodeIndex = -1
        //     } else {
        //       this.playLi(index, this.itemData[index].children[elIndex])
        //       this.$nextTick(() => {
        //         this.defaultExpandedKeys = [this.itemData[index].id]
        //         this.$refs.tree.setCurrentKey(
        //           this.itemData[index].children[elIndex].id
        //         )
        //         this.chekcParentIndex = index
        //         this.checkNodeIndex = elIndex
        //       })
        //     }
        //   }
        // })
      },
      //展开资源中心
      // openChMyZy(index, item) {
      //   this.currentZiyuan = {}
      //   if (this.tableData[index].id == 1) {
      //     this.tableData[index].id = 0
      //   } else {
      //     this.tableData[index].id = 1
      //   }
      //   if (item.kind_item_id > 0) {
      //     this.$api('ziyuan.getZiyuanList', {
      //       id: item.id,
      //       page: 1,
      //       limit: 200,
      //     }).then((res) => {
      //       this.tableData[index].kind_item = res.data
      //     })
      //   }
      // },
      //创建收藏
      handleClick(id, item) {
        this.isOpen6 = false
        if (item.collection === 0) {
          item.collection = 1
        } else {
          item.collection = 0
        }
        this.$forceUpdate()
        this.$api('ziyuan.addCollection', {
          id: id,
          token: localStorage.getItem('token'),
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.message)
            if (item.collection === 0) {
              item.collection = 1
            } else {
              item.collection = 0
            }
            this.$forceUpdate()
          }
        })
      },

      getCatList(id, item, page = 1, categoryId2, kind_name) {
        this.leftPage = 1
        this.page = 0
        this.listData = [] //清空表格数据
        if (kind_name) {
          this.kind_name = kind_name //获取资源分类
        }
        this.tableData = []
        this.clone_data = []
        if (page == 1) {
          this.currentPage = 1
        } else if (page == this.total) {
          this.currentPage = this.total
        }
        this.currentIndex = item
        this.categoryId = id
        this.page = page
        this.selectChanged(this.categoryId)
        const that = this
        this.tableData = []
        // setTimeout(, 500)
      },
      handleCurrentChange(e) {
        this.currentPage = e
        this.getCatList(this.categoryId, this.currentIndex, e, this.filetype)
      },
      selectChanged(value, type) {
        if (this.isSelectChanged) {
          return;
        }
        this.isSelectChanged = true
        this.categoryId = value
        let all_form = {
          page: this.page++,
          limit: this.page_size,
          filetype: this.filetype,
          id: this.categoryId,
        }

        this.$api('ziyuan.getKindItemList', all_form).then((res) => {
          this.isSelectChanged = false
          if (res.code == 1) {
            this.listData = this.listData.concat(res.data.data)
            if (!type) {
              this.liId = this.listData[0].id
              this.kind_item_name = this.listData[0].kind_item_name
              this.default_table()
            }
            this.seachContent = ''
            this.total = res.data.last_page
          }
        })
      },
      //跳转到搜索界面 2022-02-09
      search() {
        if (this.seachContent == '') {
          this.$message.warning('请输入搜索内容')
        } else {
          this.$router.push({
            path: '/search_content',
            query: {
              keyword: this.seachContent,
            },
          })
        }
      },
      //2022-02-08 新增 获取表格数据
      get_left_data(i, item, page = 1) {
        if (this.isGetLeftData) {
          return
        }
        this.isGetLeftData = true
        this.leftPage = page
        if (this.leftPage == 1) {
          this.showChildrenIndexs = []
          this.tableData = []
        }
        this.search_id = item.id
        // this.kind_item_name = item.
        this.liId = 1
        this.seachContent = ''
        this.$api('ziyuan.getZiyuanList', {
          page: page,
          limit: this.page_size,
          id: item.id,
          token: localStorage.getItem('token'),
          keyword: this.seachContent || undefined,
        }).then((res) => {
          this.isGetLeftData = false
          if (this.leftPage == 1) {
            this.tableData = res.data
          } else {
            this.tableData = this.tableData.concat(res.data)
          }
          if (this.leftPage == 1) {
            if (this.tableData && this.tableData.length) {
              if (
                this.tableData[0].type &&
                this.tableData[0].type == 'folder'
              ) {
                this.showChildrenIndexs.push(0)
                this.getDirIndex = 0
                this.getDirZiyuanList(this.tableData[0])
                this.dirZiyuanLoading = true
                this.$nextTick(() => {
                  this.$forceUpdate()
                })
              }
            }
          }
        })
        this.leftItem = item
        this.index = i
        this.kind_item_name = item.kind_item_name
        this.liId = item.id
      },
      //默认第一个表格数据
      default_table() {
        this.showChildrenIndexs = []
        this.seachContent = ''
        if (this.listData != []) {
          this.leftItem = this.listData[0]
          this.$api('ziyuan.getZiyuanList', {
            page: 1,
            limit: this.page_size,
            id: this.listData[0].id,
            token: localStorage.getItem('token'),
            keyword: this.seachContent || undefined,
          }).then((res) => {
            this.tableData = res.data
            this.search_id = this.listData[0].id
            if (this.tableData && this.tableData.length) {
              if (
                this.tableData[0].type &&
                this.tableData[0].type == 'folder'
              ) {
                this.showChildrenIndexs.push(0)
                this.getDirIndex = 0
                this.getDirZiyuanList(this.tableData[0])
                this.dirZiyuanLoading = true
                this.$nextTick(() => {
                  this.$forceUpdate()
                })
              }
            }
          })
        }
      },
      // 获取表格二级分类
      getDirZiyuanList(item) {
        this.$api('ziyuan.getDirZiyuanList', {
          id: item.id,
          token: localStorage.getItem('token'),
        }).then((res) => {
          this.getDirIndex = -1;
          this.dirZiyuanLoading = false
          item.children = res.data
        })
      },
      //获取当前音频播放时间
      update() {
        var audio = document.querySelector('audio');
        if (audio != null) {
          this.currentTxt = parseInt(audio.currentTime);
          this.array.forEach((element, index) => {
            if (index < this.array.length - 2) {
              if (this.currentTxt > this.array[index].time - 1 && this.currentTxt < this.array[index + 1].time) {
                this.indexArray = index
              }
            } else {
              if (this.currentTxt > this.array[index].time - 1 && this.currentTxt < this.array[index].time) {
                this.indexArray = index
              }
            }
          });
          if (this.indexArray > 6) {
            this.read = this.array.slice(this.indexArray - 5, this.indexArray + 13);
          } else {
            this.read = this.array.slice(0, this.indexArray + 13)
          }
        }
      },

      playLi(i, item) {
        let formData = {
          token: localStorage.getItem('token'),
          id: item.id,
        }
        this.$api('ziyuan.setCount', formData)
        this.shownum = item.shownum
        this.collectionnum = item.collectionnum
        this.kind_collection = item.collection
        this.kind_id = item.id //资源id
        this.checkItem = item
        var audio = document.querySelector('audio')
        if (audio != null) {
          audio.currentTime = 0
        }
        this.indexArray = 0
        this.currentTxt = 0
        this.zy_id = item.id
        this.currentZiyuan = item
        this.isPlayMusic = false
        clearInterval(this.bgTimer)
        this.bgTimer = null
        this.flag = 0
        this.imgNum = 1
        if (this.player) {
          this.player.dispose()
          this.player = null
        }
        if (this.getFileType(item.file) == 'video') {
          this.aliplay(item.file)
        } else if (this.getFileType(item.file) == 'radio') {
          this.music = item.file
          //是否有歌词，有歌词进行处理
          if (item.lyric_text != '') {
            this.array = []
            this.showImg = false
            let lyricArr = item.lyric_text.split('[').slice(1) // 先以[进行分割
            let lrcObj = {}
            lyricArr.forEach((item) => {
              var data = {}
              let arr = item.split(']') // 再分割右括号
              // 时间换算成秒
              let m = parseInt(arr[0].split(':')[0])
              let s = parseInt(arr[0].split(':')[1])
              arr[0] = m * 60 + s
              data.time = arr[0]
              if (arr[1] != '\n') {
                // 去除歌词中的换行符
                lrcObj[arr[0]] = arr[1]
                data.text = arr[1]
              }
              this.array.push(data)
            })

            this.read = this.array.slice(0, this.indexArray + 13)
          } else {
            this.showImg = true
            this.read = []
          }
          if (item.rotation_img_text != '') {
            this.bgAllImg = item.rotation_img_text
            this.bgImg = this.bgAllImg[0]
            this.showImg = false
          } else {
            this.bgImg = '../../../static/img/music-bg.jpg'
            this.bgAllImg = []
            clearInterval(this.bgTimer)
            this.flag = 0
          }
          if (this.flag == 1) {
            return
          }
          //播放背景
          this.playBg()
        }
      },

      playBg() {
        if (this.bgAllImg.length > 1) {
          this.bgTimer = setInterval(() => {
            this.flag = 1
            this.bgImg = this.bgAllImg[this.imgNum]
            if (this.imgNum == this.bgAllImg.length - 1) {
              this.imgNum = -1
            }
            this.imgNum++
          }, this.currentZiyuan.rotation_times || 10000)
        } else {
          clearInterval(this.bgTimer)
        }
      },
      // 阿里云视频播放
      aliplay(file) {
        this.isIframeLoad = true
        let that = this
        if (this.player) {
          this.player.dispose()
        }
        const saveTime = function (memoryVideo, currentTime) {
          localStorage.setItem(memoryVideo, currentTime)
        }

        const getTime = function (memoryVideo) {
          return localStorage.getItem(memoryVideo)
        }
        this.$nextTick(() => {
          this.player = new Aliplayer({
              id: 'course-player',
              source: file,
              width: '100%',
              height: '700px',
              autoplay: true,
              isLive: false,
              showBuffer: true,
              components: [{
                name: 'MemoryPlayComponent',
                type: AliPlayerComponent.MemoryPlayComponent,
                args: [false, getTime, saveTime],
              }, ],
              skinLayout: [{
                name: 'controlBar',
                align: 'blabs',
                x: 0,
                y: 0,
                children: [{
                    name: 'progress',
                    align: 'blabs',
                    x: 0,
                    y: 44
                  },
                  {
                    name: 'playButton',
                    align: 'tl',
                    x: 15,
                    y: 12
                  },
                  {
                    name: 'timeDisplay',
                    align: 'tl',
                    x: 10,
                    y: 7
                  },
                  {
                    name: 'fullScreenButton',
                    align: 'tr',
                    x: 10,
                    y: 12
                  },
                  {
                    name: 'volume',
                    align: 'tr',
                    x: 5,
                    y: 10
                  }
                ]
              }]
            },
            function (player) {}
          )
          this.player.on('ready', () => {
            this.isIframeLoad = false
          })
          this.player.on('ended', () => {
            if (!this.isFirst) {
              if (
                that.chekcParentIndex != -1 &&
                that.checkNodeIndex <
                that.tableData[that.chekcParentIndex].children.length - 1
              ) {
                if (
                  that.getFileType(
                    that.tableData[that.chekcParentIndex].children[
                      that.checkNodeIndex + 1
                    ].file
                  ) == 'video' || that.getFileType(
                    that.tableData[that.chekcParentIndex].children[
                      that.checkNodeIndex + 1
                    ].file
                  ) == 'radio'
                ) {
                  // 播放下一个
                  that.checkNodeIndex++
                  that.handleNodeClick(that.tableData[that.chekcParentIndex].children[that.checkNodeIndex],
                    that.chekcParentIndex, that.checkNodeIndex)
                }
              }
            } else {
              if (
                that.chekcParentIndex <
                that.tableData.length - 1
              ) {
                if (
                  that.getFileType(
                    that.tableData[that.chekcParentIndex].file
                  ) == 'radio' || that.getFileType(
                    that.tableData[that.chekcParentIndex].file
                  ) == 'video'
                ) {
                  // 播放下一个
                  that.chekcParentIndex++
                  that.handleNodeClick(that.tableData[that.chekcParentIndex], that.chekcParentIndex)
                }
              }
            }
          })
        })
      },
      getFileType(fileName) {
        // 后缀获取
        let suffix = ''
        // 获取类型结果
        let result = ''
        try {
          const flieArr = fileName.split('.')
          suffix = flieArr[flieArr.length - 1]
        } catch (err) {
          suffix = ''
        }
        // fileName无后缀返回 false
        if (!suffix) {
          return false
        }
        suffix = suffix.toLocaleLowerCase()
        // 图片格式
        const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
        // 进行图片匹配
        result = imglist.find((item) => item === suffix)
        if (result) {
          return 'image'
        }
        // 匹配txt
        const txtlist = ['txt']
        result = txtlist.find((item) => item === suffix)
        if (result) {
          return 'txt'
        }
        // 匹配 excel
        const excelist = ['xls', 'xlsx']
        result = excelist.find((item) => item === suffix)
        if (result) {
          return 'excel'
        }
        // 匹配 word
        const wordlist = ['doc', 'docx']
        result = wordlist.find((item) => item === suffix)
        if (result) {
          return 'word'
        }
        // 匹配 pdf
        const pdflist = ['pdf']
        result = pdflist.find((item) => item === suffix)
        if (result) {
          return 'pdf'
        }
        // 匹配 ppt
        const pptlist = ['ppt', 'pptx']
        result = pptlist.find((item) => item === suffix)
        if (result) {
          return 'ppt'
        }
        // 匹配 视频
        const videolist = [
          '3gp',
          'asf',
          'avi',
          'dat',
          'dv',
          'flv',
          'f4v',
          'gif',
          'm2t',
          'm3u8',
          'm4v',
          'mj2',
          'mjepg',
          'mkv',
          'mov',
          'mp4',
          'mpe',
          'mpg',
          'mpeg',
          'mts',
          'ogg',
          'qt',
          'rm',
          'rmab',
          'ts',
          'vob',
          'wmv',
          'webm',
        ]
        result = videolist.find((item) => item === suffix)
        if (result) {
          return 'video'
        }
        // 匹配 音频
        const radiolist = [
          'aac',
          'ac3',
          'acm',
          'amr',
          'ape',
          'caf',
          'flac',
          'm4a',
          'mp3',
          'ra',
          'wav',
          'wma',
        ]
        result = radiolist.find((item) => item === suffix)
        if (result) {
          return 'radio'
        }
        // 匹配 swf
        const swflist = ['swf']
        result = swflist.find((item) => item === suffix)
        if (result) {
          return 'swf'
        }
        //匹配html
        const htmllist = ['html']
        result = htmllist.find((item) => item === suffix)
        if (result) {
          return 'html'
        }
        // 其他 文件类型
        return 'other'
      },
      collectLi(index, id) {
        //这里的id是资源id 右边栏点击数据
        if (this.kind_collection === 0) {
          this.kind_collection = 1
          this.collectionnum = 1
        } else {
          this.kind_collection = 0
          this.collectionnum = 0
        }
        let collection = this.listData[index].collection
        this.$api('ziyuan.addCollection', {
          id: id,
        }).then((res) => {
          this.listData[index].collection = collection == 1 ? 0 : 1
          this.listData[index].collectionnum =
            collection == 1 ?
            this.listData[index].collectionnum - 1 :
            this.listData[index].collectionnum + 1
          this.currentZiyuan.collectionnum = this.listData[index].collectionnum
          this.$message.success(res.msg)
          this.checkItem.collectionnum = this.collectionnum
          this.checkItem.collection = this.kind_collection

          // TODO
          // this.$api('ziyuan.getZiyuanList', {
          //   id: this.search_id,
          //   token: localStorage.getItem('token'),
          // }).then((res) => {
          //   if (res.code == 1) {
          //     this.itemData = res.data
          //   }
          // })
        })
      },

      goHome() {
        this.$router.push(localStorage.getItem('jump_path'))
      },
      goCourse() {
        this.$router.push('/courseList')
      },
      goCollect() {
        this.$router.replace('/courseCollect')
      },
      launchFullScreen() {
        // var element = document.documentElement
        // if (element.requestFullScreen) {
        //   element.requestFullScreen()
        // } else if (element.mozRequestFullScreen) {
        //   element.mozRequestFullScreen()
        // } else if (element.webkitRequestFullScreen) {
        //   element.webkitRequestFullScreen()
        // }
      },
      getFullScreen() {
        // this.styleFitWin.margin = '0'
        // let docElm = document.getElementById('body')
        // if (docElm.requestFullscreen) {
        //   docElm.requestFullscreen()
        // } //FireFox
        // else if (docElm.mozRequestFullScreen) {
        //   docElm.mozRequestFullScreen()
        // } //Chrome等
        // else if (docElm.webkitRequestFullScreen) {
        //   docElm.webkitRequestFullScreen()
        // } //IE11
        // else if (docElm.msRequestFullscreen) {
        //   docElm.msRequestFullscreen()
        // }
        this.isFullScreen = !this.isFullScreen
        this.isShowBar = !this.isShowBar
      },
      getExitFull() {
        // if (document.exitFullscreen) {
        //   document.exitFullscreen()
        // } else if (document.mozCancelFullScreen) {
        //   document.mozCancelFullScreen()
        // } else if (document.webkitCancelFullScreen) {
        //   document.webkitCancelFullScreen()
        // } else if (document.msExitFullscreen) {
        //   document.msExitFullscreen()
        // }
        this.isFullScreen = !this.isFullScreen
        this.isShowBar = !this.isShowBar
      },
    },
    components: {
      Header,
    },
  }

</script>
<style lang="scss" scoped>
  @keyframes rota {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .stopM {
    animation: rota 2s linear infinite;
    animation-play-state: paused;
  }

  .playM {
    animation: rota 2s linear infinite;
    animation-play-state: running;
  }

  .item-bg {
    background: no-repeat;
    background-size: cover;
  }

  .item-read {}

  .item-all {
    padding: 15px;
    font-size: 18px;
  }

  .item-color {
    color: #fff;
    font-size: 26px;
  }

  /* 定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(240, 240, 240, 0);
    opacity: 0;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
    border-radius: 10px;
    // background-color: rgba(240, 240, 240, 0);
    // opacity: 0;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
    // background-color: rgba(240, 240, 240, 0);
    // opacity: 0;
  }

  .seach_btn {
    height: 40px;
    width: 45px;
    background: #55e4c2;
    border: 1px solid #55e4c2;
    opacity: 1;
    border-radius: 0 6px 6px 0px;
    line-height: 23px;
  }

  .search {
    position: absolute;
    left: 25%;
    bottom: 25%;
  }

  .collection_style {
    width: 64px;
    cursor: pointer;
    height: 22px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0px;
    color: #222222;
    opacity: 1;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node__content {
    // width: 200px;
    height: 43px;
    margin: 1px 0;
  }

  .el-tree /deep/ .is-current>.el-tree-node__content {
    background: #c9ffef !important;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 0px;
    color: #222222;
  }

  .el-tree /deep/ .el-tree-node__label {
    display: inline-block;
    width: 72%;
  }

  .el-tree /deep/ .el-tree-node__children .el-tree-node__content {
    width: 200px;
    height: 34px;
    font-size: 16px;
    font-family: PingFang SC;
    // font-weight: bold;
    line-height: 0px;
    // color: #222222;
  }

  .el-tree /deep/ .el-tree-node__children .is-current .el-tree-node__content {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 0px;
    color: #222222;
  }

  .el-tree /deep/ .el-tree-node__children .el-tree-node__content {
    font-size: 16px;
    font-family: PingFang SC;
    // font-weight: bold;
    line-height: 0px;
    // color: #222222;
  }

  .el-tree /deep/ .el_tree_item_name {
    width: 160px;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .el-tree /deep/ .is-current .el_tree_item_name {
    padding-top: 10px;
  }

  .el-tree /deep/ .el-tree-node__children .el_tree_item_name {
    width: 120px;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 8px;
  }

  .el-tree .el-tree-node__expand-icon {
    color: #fff !important;
  }

  .el-tree-node__expand-icon.is-leaf {
    color: transparent !important;
  }

  .liStyle {
    background: #c9ffef;
  }

  .liStyle .tit {
    font-weight: bold;
  }

  .seach_box /deep/ .el-input__inner {
    border-radius: 4px 0px 0px 4px;
  }

  .el_table /deep/ .el-table__placeholder {
    width: 0px;
  }

  .main_box_height {
    height: calc(100vh - 220px);
  }

  .table_header {
    width: 1020px;
    height: 48px;
    background: #eeeeee;
    color: #222222;
    font-size: 16px;
    font-weight: bold;
    display: flex;
  }

  .table_header>div {
    text-align: center;
    line-height: 48px;
    padding: 0px 10px;
  }

  .table_tr {
    width: 1020px;
    min-height: 48px;
    font-size: 16px;
    display: flex;
    border-bottom: 1px solid #eeeeee;
  }

  .table_tr>div {
    text-align: center;
    line-height: 24px;
    // padding: 0px 10px;
    padding: 12px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .table_tr>div>i {
    margin-left: 6px;
  }

</style>
<style scoped>
  .t_courseList {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .t_main_table_box {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
  }

  .t_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .t_title .t_title_left {
    display: flex;
    align-items: flex-end;
    margin-left: 40px;
    width: 890px;
  }

  .t_title .t_title_right {
    width: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    margin-top: 16px;
  }

  .t_title .t_title_right label {
    height: 14px;
    line-height: 14px;
  }

  .t_title .t_close_btn {
    width: 24px;
    height: 24px;
    margin-top: 12px;
    margin-right: 41px;
    cursor: pointer;
  }

  .child_text {
    font-size: 14px;
  }

  .fullScreen {
    width: 36px;
    height: 36px;
    position: absolute;
    /* margin-top: 12px; */
    /* margin-right: 20px; */
    right: 87px;
    top: 22px;
    cursor: pointer;
  }

  .videFullScreen {
    height: 100vh !important;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
  }

  .videFullScreen>div {
    height: 100vh !important;
  }

  .suoxiao {
    /* width: 36px !important; */
    /* height: 36px; */
    position: fixed;
    /* width: 100%; */
    top: 20px;
    right: 20px;
    z-index: 99999;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 6px; */
    box-shadow: 0px 0px 46px #000;
    border-radius: 8px;
    overflow: hidden;
  }

  .specialVideo {
    position: relative;
    overflow: hidden;
    height: 676px;
  }

  .specialVideo>.play_area {
    height: 720px;
    position: absolute;
    width: 1220px;
    top: -20px;
    left: -1px;
  }

  /deep/ .isSpecialImg>.el-carousel__container {
    height: 100vh !important;
  }

  .item-courseRadio .item-read {
    position: inherit;
    height: 85%;
    padding-bottom: 3%;
    width: 70%;
    border-radius: 12px;
  }

  .tree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    font-size: 16px;
    font-weight: 400;
    color: #222222;
    cursor: pointer;
  }

  .tree-item:hover {
    background: #ddd;
  }

  .tree-item>i {
    width: 16px;
    height: 16px;
  }

  .tree-item>span {
    width: 170px;
  }

  .tree-item>label {
    width: 20px;
    height: 20px;
  }

  .tree-children {
    padding-left: 12px;

  }

  .tree-children>span {
    width: 160px;
  }

  .tree-item-active {
    background: #C9FFEF;
    font-weight: bold;
  }

  .close-tip {
    position: fixed;
    left: 0;
    top: 30px;
    z-index: 2010;
    width: 100vw;
    text-align: center;
    font-size: 22px;
    color: #ffffff;
  }

  .close-tip>span {
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.6);
  }

  .close-img {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 2020px;
  }

</style>
